<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>京东快报</title>
		<style>
			*{
				margin: 0;
				padding:0;
			}
			html{
				background-color: #ffffff;
			}
			.a{
			    margin:30px;
				width:300px;
				border:1px grey solid;
				box-sizing:border-box;
			}
			h4{
				color: #6c6b73;
				font-weight: 400;
				font-size: 20px;
				height: 50px;
				line-height: 50px;
				text-indent: 1em;
				background-image: linear-gradient(to bottom,#cdcdff,#f9f9ff);
			}
			ul{
				border: 0px red solid;
				list-style: none;
				text-indent: 1em;
				border-top: 2px #ababab dotted;
				padding:4px 0;
			}
			li{
				height: 26px;
				border: 0px red solid;
				padding: 8px;
			}
			a{
				text-decoration: none;
				color: grey;
				font-weight: 500;
			}
			a:hover{
				color: darkred;
			}
			span{
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="a">
			 <h4>京东快报</h4>
			 <ul>
			 	<li><a href="#"><span>[特惠]</span>海飞丝去屑又去油 超清爽</a></li>
			 	<li><a href="#"><span>[公告]</span>京东公益支持鲁甸新动作</a></li>
			 	<li><a href="#"><span>[特惠]</span>4688元抢iPhone 6</a></li>
			 	<li><a href="#"><span>[公告]</span>小米电视携豪礼高调入驻京东</a></li>
			 </ul>
		</div>
	</body>
</html>
